<template>
  <div>
    {{checkedNode.join('、')}}
    <el-tree v-show="false" class="tree" :data="menuList" :props="defaultProps" :default-checked-keys="defaultCheckedKeys" show-checkbox node-key="id" :default-expand-all="true" ref="treeRef">
    </el-tree>
  </div>
</template>

<script>
import { getRoleDetails } from '@/assets/api/user/roleRight.js'

export default {
  name: 'RightsShow',
  props: {
    rowId: {
      type: Number,
      required: true
    },
    menuList: {
      type: Array,
      required: true
    }
  },
  created () { },
  data () {
    return {
      // 树形控件配置项
      defaultProps: {
        label: 'title',
        children: 'points'
      },
      checkedNode: [],
      // 角色默认的 keys 数组
      defaultCheckedKeys: []
    }
  },
  methods: {
    // 加载角色详情
    async loaderRoleDetails () {
      try {
        const { data: res } = await getRoleDetails(this.rowId)
        this.defaultCheckedKeys = res.permissions
      } catch (err) {
        this.$message.error('加载角色详情失败')
      }
      this.$nextTick(() => {
        this.getDefaultRights()
      })
    },
    // 获取角色已有权限
    getDefaultRights () {
      this.$refs.treeRef.getCheckedNodes().forEach(element => {
        this.checkedNode.push(element.title)
      });
    }
  },
  watch: {
    menuList: {
      immediate: true,
      handler: function () {
        this.$nextTick(() => {
          this.loaderRoleDetails()
        })
      }
    }
  }
}
</script>

<style  lang='less' scoped>
</style>
